<template>
  <div>
     <div class="vip2">
          <div class="vip2_1">
              <ul>
                  <li v-for="(v,i) in arrlist" :key='i'>
                      <p><img :src=v.img></p>
                      <h5>{{v.text1}}</h5>
                      <h6>{{v.text2}}</h6>
                  </li>
              </ul>
          </div>
     </div>
  </div>
</template>

<script>
 import getlink from '../../api/getapi'
export default {
   data(){
  return {
    arrlist:[
     
    ]
  }
},
created(){
  getlink("/mock/data/ticket").then((ok)=>{
    console.log(ok.data.arrlist);
    this.arrlist=ok.data.arrlist
  })
}
}
</script>

<style scoped >
.vip2{
     width: 100%;
     height: 2.6rem;
     /* background-color: pink; */
     margin-top:0.3rem;
     font-size: 0.2rem;
   }
 .vip2 .vip2_1{
     /* margin-left: 0.2rem; */
 }
 .vip2 .vip2_1 ul{
     width: 100%;
     height: 2.6rem;
     display: flex;
     justify-content: space-between;
    
     flex-wrap: wrap;
 }  
 .vip2 .vip2_1 ul li{
     width: 25%;
     height: 45%;
    align-self:center;
     list-style: none; 
     text-align: center;
 }
 .vip2 .vip2_1 ul li p{
     width: 0.6rem;
     height: 0.6rem;
     border-radius: 0.5rem;
     line-height: 0.6rem;
     background-color: skyblue;
     text-align: center;
     margin: auto;
 }
 .vip2 .vip2_1 ul li p img{
   width: 0.6rem;
   height: 0.6rem;
   border-radius: 0.5rem;
 }
.vip2 .vip2_1 ul li h5{
    font-size: 0.15rem;
    font-weight: normal;
}
.vip2 .vip2_1 ul li h6{
    font-size: 0.13rem;
    color: gray;
}
</style>